<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<script type="text/javascript" src="Plug/jquery-1.11.3.min.js"></script>
		<title>发布作品</title>
		<script src="Plug/layer-v3.1.1/layer.js" type="text/javascript" charset="utf-8"></script>
		<!--layer  弹框插件-->
		<link rel="stylesheet" href="static/css/base/reset.css" />
		<!--jqyery-weiui插件 -->
		<link rel="stylesheet" href="Plug/jquery-weui/jquery-weui.min.css">
		<link rel="stylesheet" href="Plug/jquery-weui/weui.min.css">
		<script src="Plug/jquery-weui/js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="Plug/jquery-weui/js/city-picker.js" type="text/javascript" charset="utf-8"></script>
		<!--轮播插件-->
		<link rel="stylesheet" type="text/css" href="Plug/swiper/swiper.min.css" />
		<script src="Plug/swiper/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<!--重置样式-->
		<link rel="stylesheet" href="static/css/base/main.css" />
		<!--公共样式-->
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_990287_00ut5r9tirxkf.css" />
		<!--阿里云图标库-->
		<script src="static/js/base.js" type="text/javascript" charset="utf-8"></script>
		<!---------------公共导入分割线------------------------>
		<!--本页样式-->
		<link rel="stylesheet" type="text/css" href="static/css/release/release.css" />
	</head>

	<body>
		<!--存在bar加此wrap-->
		<div class="have_bar_wrap">
			<div class="top_head flex_cb">
				<a class="back" href="javascript:void(0)"><i class="iconfont icon-xuanzeqishangyige"></i></a>
				<span>发布美图</span>
			</div>
			<div class="list_titcontent">
				<div class="list_titcontent_tit flex_cl"><i  style="font-size: .38rem;"class="iconfont icon-rename-box"></i><span>相册名称</span></div>
				<div class="list_titcontent_c">
					<input type="" placeholder="请美图相册名称..." name="" id="" value="" />
				</div>
			</div>
			<div class="list_titcontent">
				<div class="list_titcontent_tit flex_cl"><i class="iconfont icon-library-books"></i><span>内容描述</span></div>
				<div class="list_titcontent_c">
					<textarea placeholder="请输入相册描述..." name="" rows="" cols=""></textarea>
				</div>
			</div>
			<div class="list_titcontent">
				<div class="list_titcontent_tit flex_cl"><i <i style="font-size: .3rem;" class="iconfont icon-tupian"></i><span>美图上传</span></div>
				<div class="list_titcontent_c">
					<div class="add_photo">
						<a class="add_btn_yp flex_cc" href="javascript:void(0)">
							<i class="iconfont icon-tupian"></i>
							<p>添加照片</p>
						</a>
						<img src="static/images/changkuan21.png" />
						<img src="static/images/changkuan21.png" />
						<img src="static/images/changkuan21.png" />
						<img src="static/images/changkuan21.png" />
					</div>
				</div>
			</div>
			<ul class="fill_data_list meitu_filldata">
				<li>
					<i class="iconfont icon-map-marker havscolor_icon"></i><span>拍摄地点</span>
					<input id="address" placeholder="请输入拍摄地点" type="" name="" id="" value="" />
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>
				<li>
					<i style="font-size: .34rem;" class="iconfont icon-ai-user havscolor_icon"></i><span>创作人员</span>
					<input id="" placeholder="@创作人员" type="" name="" id="" value="" readonly=""/>
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>
				<!--<li style="border-bottom: none;">
					<i class="iconfont icon-repeat havscolor_icon"></i><span>约拍反片</span>
					<div class="meitu_back">
						<span>是否约拍反片</span>
						 <input class="weui-switch" type="checkbox">
					</div>
					<i class="iconfont icon-xuanzeqixiayige"></i>
				</li>-->
			</ul>
			<div class="choice_tip ">
				<div class="choice_tip_tit flex_cl field_zhuti">
					<i class="iconfont icon-palette icon-zhuti"></i>
					<span>主题标签（多选）</span>
				</div>
				<div class="choice_tiplist">
					<a class="choice_tip_action" href="javascript:void(0)">时尚</a>
					<a href="javascript:void(0)">性感</a>
					<a href="javascript:void(0)">暗黑</a>
					<a href="javascript:void(0)">情绪</a>
					<a href="javascript:void(0)">胶片</a>
					<a href="javascript:void(0)">校园</a>
					<a href="javascript:void(0)">纪实</a>
					<a href="javascript:void(0)">妆面</a>
					<a href="javascript:void(0)">日系</a>
					<a href="javascript:void(0)">复古</a>
					<a href="javascript:void(0)">COS</a>
					<a href="javascript:void(0)">少女</a>
					<a href="javascript:void(0)">青春</a>
					<a href="javascript:void(0)">糖水</a>
					<a href="javascript:void(0)">情侣</a>
					<a href="javascript:void(0)">爱情</a>
					<a href="javascript:void(0)">封面</a>
					<a href="javascript:void(0)">夜景</a>
					<a href="javascript:void(0)">欧美</a>
					<a href="javascript:void(0)">古风</a>
					<a href="javascript:void(0)">清新</a>
					<a href="javascript:void(0)">淘宝</a>
					<a href="javascript:void(0)">森系</a>
					<a href="javascript:void(0)">视觉</a>
					<a href="javascript:void(0)">非主流</a>
					<a href="javascript:void(0)">哥特</a>
				</div>
			</div>
			<a class="next_fill flex_cc" href="javascript:void(0)">立即发布</a>
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			$("#field_type").picker({
				title: "请选择场地类型",
				cols: [{
					textAlign: 'center',
					values: ['景点', '影棚', '街道', '校园', '公园', '郊外', '图书馆', '咖啡厅', '游乐场', '商城', '酒店', '工厂', '其他']
				}],
				onClose: function(d) {
					val = (this, d.displayValue);
					alert(JSON.stringify(val));
				}
			});
			$("#huiyuan").picker({
				title: "请选择是否会员",
				cols: [{
					textAlign: 'center',
					values: ['是', '否']
				}],
				onClose: function(d) {
					val = (this, d.displayValue);
					alert(JSON.stringify(val))
				}
			});
			$("#city-picker").cityPicker({
				title: "请选择地区",
				onClose: function(d) {
					console.log(this, d)
					city = (this, d.displayValue);
					alert(JSON.stringify(city))
				},
				onConfirm: function(result) {}
			});
			$(document).on("click", ".add_photo img", function() {
				$(this).remove();
			})
			$(document).on("click", ".choice_tiplist a", function() {
				if($(this).hasClass("choice_tip_action")) {
					$(this).removeClass("choice_tip_action");
				} else {
					$(this).addClass("choice_tip_action");
					var tipnum = $(this).parent().find(".choice_tip_action").length;
					if(tipnum > 5) {
						Msg("最多只能选择5个");
						$(this).removeClass("choice_tip_action");
						return false;
					}
				}
			})
			$(document).on("click tap", "#address", function() {
				var str = `<iframe style="position: fixed;z-index:9999;bottom:0;height: 100%;" id="mapPage" width="100%" height="100%" frameborder=0
    src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=5T3BZ-Y6733-AEN3O-YESWJ-6IUVO-O4BYD&referer=myapp">
</iframe>`;
				$(str).prependTo('body');
			})
		})
		window.addEventListener('message', function(event) {
			// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
			var loc = event.data;
			if(loc && loc.module == 'locationPicker') {
				console.log('location', loc);
				console.log("地址名称" + loc.poiname + '</br>' + "位于" + loc.poiaddress);
				$("#address").val(loc.poiaddress);
				$("#mapPage").remove();
			}
		}, false);
	</script>

</html>